<template>
  <view class="tt" :style="{height:getstateheight()+'px'}"> </view>
  <view class="titletopp" :style="{height:gettitileheight()+'px'}">
     <view @click="bhxo" style="width:50rpx;" class="iconfont icon-fanhui"></view>	   
	 <view class="">个人资料</view>
	 <view style="width:50rpx;" class=""></view>
  </view>
  <view class="con">
	       <view class="">
			   <view class="item" @click="chooseimg">
			   			     <view class="l">头像</view>
			   			     <view class="r">
			   					  <image class="r-l" v-if="useuserstore.userlogin.img.includes(`http`)" :src="useuserstore.userlogin.img" mode="aspectFill"></image>
			   					  <image class="r-l" v-else  :src="ip+'/'+useuserstore.userlogin.img" mode="aspectFill"></image>
			   					  <view  class="iconfont icon-fanhui r-r"></view>
			   				 </view>
			   </view>
			   <view class="item bor">
			   			     <view class="l">ID</view>
			   			     <view class="r">
			   					  <view class="r-l" >{{useuserstore.userlogin.id}}</view>
			   					  <view class="iconfont icon-fuzhi  r-r" @click="setClipboard(useuserstore.userlogin.id)"></view>
			   				 </view>
			   </view>
			   <view class="item" @click="gai">
			   			     <view class="l">昵称</view>
			   			     <view class="r">
			   					 <view class="r-l" >{{useuserstore.userlogin.name}}</view>
			   					  <view class="iconfont icon-fanhui r-r"></view>
			   				 </view>
			   </view>
		   </view>
  </view>
</template>

<script setup>
	    import { ip } from '@/utils/getinfo.js';
		import {getstateheight,gettitileheight} from '@/utils/getinfo.js'
		import {userupdateimg,useruodatename} from '@/api/index.js'
		import userstore from '@/store/userlogin.js'
		const heightbox=getstateheight()+gettitileheight()+'px'
		const useuserstore=userstore()
		const bhxo=()=>{
			uni.navigateBack()
		}
		const chooseimg=()=>{
			uni.chooseImage({
				 success(e) {
					 sendimg(e)
				}
			})
		}
		const sendimg=async (e)=>{
		const rudata=await	userupdateimg(e.tempFilePaths[0])
		     if(rudata.code==200){
				   useuserstore.userlogin.img=rudata.newimg
				   uni.showToast({
				   	   title:"头像修改成功！",
					   icon:"none"
				   })
			 }
		}
		const setClipboard=(e)=>{
			   uni.setClipboardData({
			   	data:String(e),
				success() {
					  uni.showToast({
					  	   title:"复制成功！",
					  		icon:"success"
					  })
				},
				fail() {
					uni.showToast({
						   title:"复制失败！",
							icon:"error"
					})
				}
			   })
		}
		const gai=()=>{
			 uni.showModal({
			 	 title:"修改昵称",
				 editable:true,
				 success(e) {
				 	if(e.confirm){
						if(!e.content.trim()){
							uni.showToast({
								   title:"不能为空！",
									icon:"error"
							})
							return
						}
						 sendname(e.content)
					}
				 }
			 })
		}
		const sendname=async(name)=>{
			  const rudata=await useruodatename(name)
			  if(rudata.code==200){
				  useuserstore.userlogin.name=rudata.name
				  uni.showToast({
				  	   title:"修改成功！",
				  		icon:"success"
				  })
			  }
		}
</script>

<style lang="scss" scoped>
	.titletopp{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		font-size: 25rpx;
		background-color: #f7f7f7;
		.iconfont{
			font-size: 25rpx;
		}
	}
	.tt{
		background-color: #f7f7f7;
	}
	.con{
		height: calc(100vh - v-bind(heightbox));
		background-color: #f7f7f7;
		padding: 20rpx 25rpx 0  25rpx;
		>view{
			height: 300rpx;
			width: 100%;
			border-radius: 20rpx;
			background-color: #fff;
			padding:0 25rpx;
			.bor{
				border-top: 1rpx solid #eee;
				border-bottom: 1rpx solid #eee;
			}
			.item{
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.l{
					font-size: 25rpx;
				}
				.r{
					display: flex;
					align-items: center;
					font-size: 22rpx;
					color:#7b7b7b;
					image{
						height: 75rpx;
						width: 75rpx;
						border-radius: 50%;
					}
					.iconfont{
						transform: rotate(180deg);
						font-size: 22rpx;
						margin: 0 20rpx;
					}
				}
			}
		}
	}
</style>
